<template>
    <div>
        <ModalComponent @open="handleOpen" modal-name="switch-event-examination-venues" title="分配考场"
            :close-on-click-modal="false" size="560px" width="560px">
            <div>
                <el-alert type="error" :close="closable" size="large">注：该操作会改变学生报名的赛项，以及考场信息，请谨慎操作！！！</el-alert>
                <el-form size="large" label-width="100px" :model="formData" style="padding-top: 16px;">
                    <el-form-item label="选择学生">
                        <el-select multiple filterable remote :loading="data['student'].loading"
                            v-model="formData.esIds" :remote-method="handleGetStudentNot" placeholder="输入内容搜索学生"
                            style="width:320px">
                            <el-option v-for="item in data['student'].list" :key="item.value" :value="item.value"
                                :label="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择赛项">
                        <el-select remote :loading="data['event'].loading" v-model="formData.eventId" style="width:320px"
                            placeholder="输入选择赛项" @change="handleGetEventRoom">
                            <el-option v-for="item in data['event'].list" :key="item.value" :value="item.value"
                                :label="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择考场">
                        <el-select remote :loading="data['room'].loading" v-model="formData.siteId" style="width:320px"
                            placeholder="输入选择考场">
                            <el-option v-for="item in data['room'].list" :key="item.value" :value="item.value"
                                :label="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" style="width: 120px;" @click="handleSubmit">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </ModalComponent>
    </div>
</template>
<script setup >
import { ref } from 'vue'
import ModalComponent from "@/components/modal/index.vue"
import { ElMessage, ElMessageBox } from 'element-plus';
import { GetEventsNotApi } from "@/api/manage/institution";
import { getStudentNot, getEventRoom, transferStudents } from "@/api/gradingTeacher"
import { close } from '@/utils/modal';
const emit = defineEmits(['update'])
const data = ref({
    "student": {
        list: [],
        loading: false
    },
    "event": {
        list: [],
        loading: false
    },
    "room": {
        list: [],
        loading: false
    },
})
const eventId = ref("")
const formData = ref({
    esIds: [],
    eventId: "",
    siteId: ""
})
const rules = ref({
    stem: [
        { required: true, message: '请输入题干', },
    ],

});
const handleOpen = (e) => {
    eventId.value = e.eventId;
    handleGetEventsNot();
    formData.value = {
        esIds: [],
        eventId: "",
        siteId: ""
    }
}


const handleSave = () => {
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            emit('update')
        }
    })

}

const handleGetEventsNot = async () => {
    let res = await GetEventsNotApi()
    if (res.success) {
        data.value['event'].list = res.entityList.map((item) => {
            return {
                label: item.name,
                value: item.eventId
            }
        })
    }
}

const handleGetStudentNot = async (query) => {
    if (query) {
        data.value['student'].loading = true;
        let res = await getStudentNot({
            eventId: eventId.value,
            studentName: query
        })
        if (res.success) {
            console.log(res);
            data.value['student'].list = res.entityList.map((item) => {
                return {
                    label: item.studentName + `(${item.phone})`,
                    value: item.esId
                }
            })
        }
        data.value['student'].loading = false;
    } else {
        data.value['student'].list = [];
    }

}

const handleGetEventRoom = async () => {
    formData.value.siteId = "";
    let res = await getEventRoom({
        eventId: formData.value.eventId
    })
    if (res.success) {
        data.value['room'].list = res.entityList.map((item) => {
            return {
                label: item.siteName,
                value: item.siteId
            }
        })
    } else {
        data.value['room'].list = [];
    }
}
const handleSubmit = () => {
    // 激活绑定
    ElMessageBox.confirm("你确定切换当前学生到指定的赛项考场下吗？", "确认操作", {
        type: "warning",
    }).then(async () => {
        // rootId
        let esIds = formData.value.esIds.join(',');
        let res = await transferStudents({
            esIds: esIds,
            eventId: formData.value.eventId,
            siteId: formData.value.siteId,
        });
        if (!res.success) {
            ElMessage.error(res.message);
        } else {
            ElMessage.success(res.message);
            close("switch-event-examination-venues")
            emit('update')
        }
    });
}
</script>
<style lang="scss" scoped>
.options-container {
    width: 100%;

    >div {
        padding-bottom: 16px;
        display: flex;
        align-items: flex-start;
        width: 100%;

        .sort {
            width: 32px;
            height: 40px;
            display: flex;
            justify-content: center;
            background-color: #ccc;
            border-radius: 4px;
        }

        .center {
            padding: 0 8px;
            flex-shrink: 0;
            box-sizing: border-box;
            width: 420px;
        }

        .right {
            flex-shrink: 0;
        }
    }
}
</style>